<template>
  <div class="TableList">
    <el-table :data="roleList" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- 扩展行 显示权限 -->
          <row-expand :row="scope.row"></row-expand>
        </template>
      </el-table-column>
      <el-table-column prop="role_name" label="角色名称"> </el-table-column>
      <el-table-column prop="role_desc" label="角色描述"> </el-table-column>
      <el-table-column label="操作" width="240px">
        <template slot-scope="scope">
          <!-- scope.$index -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
            :disabled="
              scope.row.role_name === '超级管理员'
                ? true
                : !$store.state.btn_permission.includes('140')
            "
            v-has="140"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row)"
            :disabled="
              scope.row.role_name === '超级管理员'
                ? true
                : !$store.state.btn_permission.includes('130')
            "
            v-has="130"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-setting"
            @click="showPermissionDialog(scope.row)"
            :disabled="
              scope.row.role_name === '超级管理员'
                ? true
                : !$store.state.btn_permission.includes('141')
            "
            v-has="141"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑框 -->
    <edit-role-dialog></edit-role-dialog>
    <!-- 分配权限框 -->
    <dispatch-perm-dialog></dispatch-perm-dialog>
  </div>
</template>

<script>
import { getRoleList, delRole } from "@/api/role";
import EditRoleDialog from "./Dialog/EditRoleDialog.vue";
import RowExpand from "./TableListExpand/RowExpand.vue";
import DispatchPermDialog from "./Dialog/DispatchPermDialog.vue";

export default {
  name: "TableList",
  data() {
    return {
      roleList: [],
    };
  },
  components: {
    EditRoleDialog,
    RowExpand,
    DispatchPermDialog,
  },
  created() {
    this.initRoleList();
  },
  mounted() {
    //用于添加角色后刷新
    this.$bus.$on("refreshRoleList", () => {
      this.initRoleList();
    });
  },
  methods: {
    //获取角色列表初始数据
    initRoleList() {
      getRoleList().then(
        (res) => {
          // console.log(res.data);
          if (res.data.status !== 200) {
            return this.$message.error("角色列表获取失败!");
          }
          this.roleList = res.data.data;
        },
        (err) => {
          this.$message.error("角色列表获取失败!");
          console.log(err);
        }
      );
    },
    del(row) {
      this.$confirm("删除当前角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(row.role_id, row.role_name);
          delRole(row.role_id).then(
            (res) => {
              if (res.data.status !== 200) {
                return this.$message.error("删除失败!");
              }
              this.$message.success("删除成功!");
              //刷新列表
              this.initRoleList();
            },
            (err) => {
              // console.log(err);
              this.$message.error("删除失败!");
            }
          );
        })
        .catch(() => {
          this.$message.info("取消删除!");
        });
    },
    showEditDialog(row) {
      this.$bus.$emit("showEditDialog", row);
    },
    showPermissionDialog(row) {
      this.$bus.$emit("showDispatchPermDialog", row);
    },
  },
};
</script>

<style  scoped>
.TableList {
  padding: 0 20px 20px;
}
.el-button {
  padding: 5px 10px;
  font-size: 12px;
  margin-left: 2px;
}
</style>
